<!doctype html public "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <title>Ext.BorderLayout</title>
        <link rel="stylesheet" type="text/css" href="../resources/reset.css"/>
        <link rel="stylesheet" type="text/css" href="../resources/style.css" media="screen"/>
        <link rel="stylesheet" type="text/css" href="../resources/print.css" media="print">
        <!-- GC -->
    </head>
    <body>
            <div class="body-wrap">
        <div class="top-tools">
        	<img src="../resources/print.gif" width="16" height="16" align="absmiddle">&nbsp;<a href="Ext.BorderLayout.html" target="_blank">Print Friendly</a><br/>

        </div>
        <h1>Class Ext.BorderLayout</h1>
        <table cellspacing="0">
            <tr><td class="label">Package:</td><td>Ext</td></tr>
            <tr><td class="label">Class:</td><td>BorderLayout</td></tr>
                        <tr><td class="label">Extends:</td><td><a ext:cls="Ext.LayoutManager" ext:member="" href="Ext.LayoutManager.html">LayoutManager</a></td></tr>
                                    <tr><td class="label">Subclasses:</td><td><a ext:cls="Ext.ReaderLayout" href="Ext.ReaderLayout.html">ReaderLayout</a></td></tr>
                        <tr><td class="label">Defined In:</td><td><a href="BorderLayout.jss.html">BorderLayout.js</a></td></tr>
        </table>
        <div class="description">
            This class represents a common layout manager used in desktop applications. For screenshots and more details,
please see: <br><br>
<a href="http://www.jackslocum.com/yui/2006/10/19/cross-browser-web-20-layouts-with-yahoo-ui/">Cross Browser Layouts - Part 1</a><br>
<a href="http://www.jackslocum.com/yui/2006/10/28/cross-browser-web-20-layouts-part-2-ajax-feed-viewer-20/">Cross Browser Layouts - Part 2</a><br><br>
Example:
 <pre><code>var layout = <b>new</b> Ext.BorderLayout(document.body, {
    north: {
        initialSize: 25,
        titlebar: false
    },
    west: {
        split:true,
        initialSize: 200,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    east: {
        split:true,
        initialSize: 202,
        minSize: 175,
        maxSize: 400,
        titlebar: true,
        collapsible: true
    },
    south: {
        split:true,
        initialSize: 100,
        minSize: 100,
        maxSize: 200,
        titlebar: true,
        collapsible: true
    },
    center: {
        titlebar: true,
        autoScroll:true,
        resizeTabs: true,
        minTabWidth: 50,
        preferredTabWidth: 150
    }
});

<i>// shorthand</i>
<b>var</b> CP = Ext.ContentPanel;

layout.beginUpdate();
layout.add(<em>"north"</em>, <b>new</b> CP(<em>"north"</em>, <em>"North"</em>));
layout.add(<em>"south"</em>, <b>new</b> CP(<em>"south"</em>, {title: <em>"South"</em>, closable: true}));
layout.add(<em>"west"</em>, <b>new</b> CP(<em>"west"</em>, {title: <em>"West"</em>}));
layout.add(<em>"east"</em>, <b>new</b> CP(<em>"autoTabs"</em>, {title: <em>"Auto Tabs"</em>, closable: true}));
layout.add(<em>"center"</em>, <b>new</b> CP(<em>"center1"</em>, {title: <em>"Close Me"</em>, closable: true}));
layout.add(<em>"center"</em>, <b>new</b> CP(<em>"center2"</em>, {title: <em>"Center Panel"</em>, closable: false}));
layout.getRegion(<em>"center"</em>).showPanel(<em>"center1"</em>);
layout.endUpdate();</code></pre>

<b>The container the layout is rendered into can be either the body element or any other element.
If it is not the body element, the container needs to either be an absolute positioned element,
or you will need to add "position:relative" to the css of the container.  You will also need to specify
the container size if it is not the body element.</b>        </div>
        <br />
        	<a href="#properties">Properties</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#methods">Methods</a>
			&nbsp;&nbsp;-&nbsp;&nbsp;<a href="#events">Events</a>
        	        <hr />
        <a name="properties"></a>
        <h2>Public Properties</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Property</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#monitorWindowResize">monitorWindowResize</a> : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#monitorWindowResize" href="Ext.LayoutManager.html#monitorWindowResize">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">false to disable window resize monitoring</td>
    </tr>
            </table>
                <a name="methods"></a>
        <h2>Public Methods</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Method</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><b>BorderLayout</b>(&nbsp;<code>String/HTMLElement/Element container</code>, <code>Object config</code>&nbsp;)</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class="">
        <td class="mdesc">Create a new BorderLayout</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#add">add</a>(&nbsp;<code>String target</code>, <code>Ext.ContentPanel panel</code>&nbsp;) : Ext.ContentPanel</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">Adds a ContentPanel (or subclass) to this layout.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addEvents">addEvents</a>(&nbsp;<code>Object object</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Used to define events on this Observable</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addListener">addListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Appends an event handler to this component</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#addRegion">addRegion</a>(&nbsp;<code>String target</code>, <code>Object config</code>&nbsp;) : BorderLayoutRegion</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class="">
        <td class="mdesc">Creates and adds a new region if it doesn't already exist.</td>
    </tr>
        <tr class=" alt" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#batchAdd">batchAdd</a>(&nbsp;<code>Object regions</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class=" alt" expandable>
        <td class="mdesc">Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
object sh...</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#beginUpdate">beginUpdate</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#beginUpdate" href="Ext.LayoutManager.html#beginUpdate">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Suspend the LayoutManager from doing auto-layouts while
making multiple add or remove calls</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#endUpdate">endUpdate</a>(&nbsp;<code>Boolean noLayout</code>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#endUpdate" href="Ext.LayoutManager.html#endUpdate">LayoutManager</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Restore auto-layouts and optionally disable the manager from performing a layout</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#findPanel">findPanel</a>(&nbsp;<code>String panelId</code>&nbsp;) : Ext.ContentPanel</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class="">
        <td class="mdesc">Searches all regions for a panel with the specified id</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#fireEvent">fireEvent</a>(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires the specified event with the passed parameters (minus the event name).</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getEl">getEl</a>() : Ext.Element</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#getEl" href="Ext.LayoutManager.html#getEl">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns the Element this layout is bound to.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getRegion">getRegion</a>(&nbsp;<code>String target</code>&nbsp;) : Ext.LayoutRegion</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#getRegion" href="Ext.LayoutManager.html#getRegion">LayoutManager</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Returns the specified region.</td>
    </tr>
        <tr class=" inherited" expandable>
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#getViewSize">getViewSize</a>() : Object</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#getViewSize" href="Ext.LayoutManager.html#getViewSize">LayoutManager</a></td>
    </tr>
    <tr class=" inherited" expandable>
        <td class="mdesc">Returns the size of the current view. This method normalizes document.body and element embedded layouts and
performs ...</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#hasListener">hasListener</a>(&nbsp;<code>String eventName</code>&nbsp;) : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Checks to see if this object has any listeners for a specified event</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#isUpdating">isUpdating</a>() : Boolean</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#isUpdating" href="Ext.LayoutManager.html#isUpdating">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Returns true if this layout is currently being updated</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#layout">layout</a>() : void</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">Performs a layout update.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#on">on</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Appends an event handler to this element (shorthand for addListener)</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#purgeListeners">purgeListeners</a>() : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes all listeners for this object</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#remove">remove</a>(&nbsp;<code>String target</code>, <code>Number/String/Ext.ContentPanel panel</code>&nbsp;) : Ext.ContentPanel</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class="">
        <td class="mdesc">Remove a ContentPanel (or subclass) to this layout.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#removeListener">removeListener</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Removes a listener</td>
    </tr>
        <tr class="">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#restoreState">restoreState</a>(&nbsp;<span class="optional" title="Optional">[<code>Ext.state.Provider provider</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class="">
        <td class="mdesc">Restores this layout's state using Ext.state.Manager or the state provided by the passed provider.</td>
    </tr>
        <tr class=" alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#showPanel">showPanel</a>(&nbsp;<code>String/ContentPanel panelId</code>&nbsp;) : Ext.ContentPanel</td>
        <td class="msource" rowspan="2">BorderLayout</td>
    </tr>
    <tr class=" alt">
        <td class="mdesc">Searches all regions for a panel with the specified id and activates (shows) it.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#un">un</a>(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;) : void</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Removes a listener (shorthand for removeListener)</td>
    </tr>
            </table>
                <a name="events"></a>
        <h2>Public Events</h2>
                <table cellspacing="0" class="member-table">
            <tr>
                <th class="sig-header" colspan="2">Event</th>
                <th class="msource-header">Defined By</th>
            </tr>
                <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-layout">layout</a> : (&nbsp;<code>Ext.LayoutManager this</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#event-layout" href="Ext.LayoutManager.html#event-layout">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a layout is performed.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-regioncollapsed">regioncollapsed</a> : (&nbsp;<code>Ext.LayoutRegion region</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#event-regioncollapsed" href="Ext.LayoutManager.html#event-regioncollapsed">LayoutManager</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when a region is collapsed.</td>
    </tr>
        <tr class=" inherited">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-regionexpanded">regionexpanded</a> : (&nbsp;<code>Ext.LayoutRegion region</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#event-regionexpanded" href="Ext.LayoutManager.html#event-regionexpanded">LayoutManager</a></td>
    </tr>
    <tr class=" inherited">
        <td class="mdesc">Fires when a region is expanded.</td>
    </tr>
        <tr class=" inherited alt">
        <td class="micon" rowspan="2">&nbsp;</td>
        <td class="sig"><a class="mlink" href="#event-regionresized">regionresized</a> : (&nbsp;<code>Ext.LayoutRegion region</code>, <code>Number newSize</code>&nbsp;)</td>
        <td class="msource" rowspan="2"><a ext:cls="Ext.LayoutManager" ext:member="#event-regionresized" href="Ext.LayoutManager.html#event-regionresized">LayoutManager</a></td>
    </tr>
    <tr class=" inherited alt">
        <td class="mdesc">Fires when the user resizes a region.</td>
    </tr>
            </table>
                                    <h2 class="mdetail-head">Property Details</h2>
            <div class="detail-wrap">
                            <a name="monitorWindowResize"></a>
                <div class="mdetail">
                <h3>monitorWindowResize</i></h3>
                <code>public Boolean monitorWindowResize</code>
                <div class="mdetail-desc">
                    false to disable window resize monitoring                </div>
                <div class="mdetail-def">This property is defined by <a ext:cls="Ext.LayoutManager" ext:member="#monitorWindowResize" href="Ext.LayoutManager.html#monitorWindowResize">LayoutManager</a>.</div>
                </div>
                        </div>
        
                    <a name="BorderLayout"></a>
            <h2 class="mdetail-head">Constructor Details</h2>
            <div class="detail-wrap">
                <div class="mdetail">
                <h3>BorderLayout</i></h3>
                <code>public function BorderLayout(&nbsp;<code>String/HTMLElement/Element container</code>, <code>Object config</code>&nbsp;)</code>
                <div class="mdetail-desc">
                Create a new BorderLayout                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>container</code> : String/HTMLElement/Element<div class="sub-desc">The container this layout is bound to</div></li><li><code>config</code> : Object<div class="sub-desc">Configuration options</div></li>                    </ul>
                </div>
                </div>
                </div>
            </div>
        
                    <h2 class="mdetail-head">Method Details</h2>
            <div class="detail-wrap">
                            <a name="add"></a>
                <div class="mdetail">
                <h3>add</i></h3>
                <code>public function add(&nbsp;<code>String target</code>, <code>Ext.ContentPanel panel</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Adds a ContentPanel (or subclass) to this layout.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>target</code> : String<div class="sub-desc">The target region key (north, south, east, west or center).</div></li><li><code>panel</code> : Ext.ContentPanel<div class="sub-desc">The panel to add</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.ContentPanel</code><div class="sub-desc">The added panel</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="addEvents"></a>
                <div class="mdetail alt">
                <h3>addEvents</i></h3>
                <code>public function addEvents(&nbsp;<code>Object object</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Used to define events on this Observable
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>object</code> : Object<div class="sub-desc">The object with the events defined</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addEvents" href="Ext.util.Observable.html#addEvents">Observable</a>.</div>
                </div>
                            <a name="addListener"></a>
                <div class="mdetail">
                <h3>addListener</i></h3>
                <code>public function addListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this component
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional) An object containing handler configuration
properties. This may contain any of the following properties:<ul>
<li>scope {Object} The scope in which to execute the handler function. The handler function's "this" context.</li>
<li>delay {Number} The number of milliseconds to delay the invocation of the handler after te event fires.</li>
<li>single {Boolean} True to add a handler to handle just the next firing of the event, and then remove itself.</li>
<li>buffer {Number} Causes the handler to be scheduled to run in an <a ext:cls="Ext.util.DelayedTask" href="Ext.util.DelayedTask.html">Ext.util.DelayedTask</a> delayed
by the specified number of milliseconds. If the event fires again within that time, the original
handler is <em>not</em> invoked, but the new handler is scheduled in its place.</li>
</ul><br>
<p>
<b>Combining Options</b><br>
Using the options argument, it is possible to combine different types of listeners:<br>
<br>
A normalized, delayed, one-time listener that auto stops the event and passes a custom argument (forumId)
		<pre><code>el.on(<em>'click'</em>, <b>this</b>.onClick, <b>this</b>, {
 			single: true,
    		delay: 100,
    		forumId: 4
		});</code></pre>
<p>
<b>Attaching multiple handlers in 1 call</b><br>
The method also allows for a single argument to be passed which is a config object containing properties
which specify multiple handlers.
<pre><code>el.on({
			<em>'click'</em>: {
        		fn: <b>this</b>.onClick,
        		scope: <b>this</b>,
        		delay: 100
    		}, 
    		<em>'mouseover'</em>: {
        		fn: <b>this</b>.onMouseOver,
        		scope: <b>this</b>
    		},
    		<em>'mouseout'</em>: {
        		fn: <b>this</b>.onMouseOut,
        		scope: <b>this</b>
    		}
		});</code></pre>
<p>
Or a shorthand syntax which passes the same scope object to all handlers:
 	<pre><code>el.on({
			<em>'click'</em>: <b>this</b>.onClick,
    		<em>'mouseover'</em>: <b>this</b>.onMouseOver,
    		<em>'mouseout'</em>: <b>this</b>.onMouseOut,
    		scope: <b>this</b>
		});</code></pre></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#addListener" href="Ext.util.Observable.html#addListener">Observable</a>.</div>
                </div>
                            <a name="addRegion"></a>
                <div class="mdetail alt">
                <h3>addRegion</i></h3>
                <code>public function addRegion(&nbsp;<code>String target</code>, <code>Object config</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Creates and adds a new region if it doesn't already exist.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>target</code> : String<div class="sub-desc">The target region key (north, south, east, west or center).</div></li><li><code>config</code> : Object<div class="sub-desc">The regions config object</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>BorderLayoutRegion</code><div class="sub-desc">The new region</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="batchAdd"></a>
                <div class="mdetail">
                <h3>batchAdd</i></h3>
                <code>public function batchAdd(&nbsp;<code>Object regions</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Adds a batch of multiple ContentPanels dynamically by passing a special regions config object.  This config
object should contain properties for each region to add ContentPanels to, and each property's value should be
a valid ContentPanel config object.  Example:
<pre><code><i>// Create the main layout</i>
<b>var</b> layout = <b>new</b> Ext.BorderLayout(<em>'main-ct'</em>, {
    west: {
        split:true,
        minSize: 175,
        titlebar: true
    },
    center: {
        title:<em>'Components'</em>
    }
}, <em>'main-ct'</em>);

<i>// Create and add multiple ContentPanels at once via configs</i>
layout.batchAdd({
   west: {
       id: <em>'source-files'</em>,
       autoCreate:true,
       title:<em>'Ext Source Files'</em>,
       autoScroll:true,
       fitToFrame:true
   },
   center : {
       el: cview,
       autoScroll:true,
       fitToFrame:true,
       toolbar: tb,
       resizeEl:<em>'cbody'</em>
   }
});</code></pre>
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>regions</code> : Object<div class="sub-desc">An object containing ContentPanel configs by region name</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="beginUpdate"></a>
                <div class="mdetail alt">
                <h3>beginUpdate</i></h3>
                <code>public function beginUpdate()</code>
                <div class="mdetail-desc">
                    Suspend the LayoutManager from doing auto-layouts while
making multiple add or remove calls
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#beginUpdate" href="Ext.LayoutManager.html#beginUpdate">LayoutManager</a>.</div>
                </div>
                            <a name="endUpdate"></a>
                <div class="mdetail">
                <h3>endUpdate</i></h3>
                <code>public function endUpdate(&nbsp;<code>Boolean noLayout</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Restore auto-layouts and optionally disable the manager from performing a layout
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>noLayout</code> : Boolean<div class="sub-desc">true to disable a layout update</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#endUpdate" href="Ext.LayoutManager.html#endUpdate">LayoutManager</a>.</div>
                </div>
                            <a name="findPanel"></a>
                <div class="mdetail alt">
                <h3>findPanel</i></h3>
                <code>public function findPanel(&nbsp;<code>String panelId</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Searches all regions for a panel with the specified id
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>panelId</code> : String<div class="sub-desc"></div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.ContentPanel</code><div class="sub-desc">The panel or null if it wasn't found</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="fireEvent"></a>
                <div class="mdetail">
                <h3>fireEvent</i></h3>
                <code>public function fireEvent(&nbsp;<code>String eventName</code>, <code>Object... args</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Fires the specified event with the passed parameters (minus the event name).
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc"></div></li><li><code>args</code> : Object...<div class="sub-desc">Variable number of parameters are passed to handlers</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">returns false if any of the handlers return false otherwise it returns true</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#fireEvent" href="Ext.util.Observable.html#fireEvent">Observable</a>.</div>
                </div>
                            <a name="getEl"></a>
                <div class="mdetail alt">
                <h3>getEl</i></h3>
                <code>public function getEl()</code>
                <div class="mdetail-desc">
                    Returns the Element this layout is bound to.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.Element</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#getEl" href="Ext.LayoutManager.html#getEl">LayoutManager</a>.</div>
                </div>
                            <a name="getRegion"></a>
                <div class="mdetail">
                <h3>getRegion</i></h3>
                <code>public function getRegion(&nbsp;<code>String target</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Returns the specified region.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>target</code> : String<div class="sub-desc">The region key ('center', 'north', 'south', 'east' or 'west')</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.LayoutRegion</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#getRegion" href="Ext.LayoutManager.html#getRegion">LayoutManager</a>.</div>
                </div>
                            <a name="getViewSize"></a>
                <div class="mdetail alt">
                <h3>getViewSize</i></h3>
                <code>public function getViewSize()</code>
                <div class="mdetail-desc">
                    Returns the size of the current view. This method normalizes document.body and element embedded layouts and
performs box-model adjustments.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Object</code><div class="sub-desc">The size as an object {width: (the width), height: (the height)}</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#getViewSize" href="Ext.LayoutManager.html#getViewSize">LayoutManager</a>.</div>
                </div>
                            <a name="hasListener"></a>
                <div class="mdetail">
                <h3>hasListener</i></h3>
                <code>public function hasListener(&nbsp;<code>String eventName</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Checks to see if this object has any listeners for a specified event
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The name of the event to check for</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code><div class="sub-desc">True if the event is being listened for, else false</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#hasListener" href="Ext.util.Observable.html#hasListener">Observable</a>.</div>
                </div>
                            <a name="isUpdating"></a>
                <div class="mdetail alt">
                <h3>isUpdating</i></h3>
                <code>public function isUpdating()</code>
                <div class="mdetail-desc">
                    Returns true if this layout is currently being updated
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Boolean</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.LayoutManager" ext:member="#isUpdating" href="Ext.LayoutManager.html#isUpdating">LayoutManager</a>.</div>
                </div>
                            <a name="layout"></a>
                <div class="mdetail">
                <h3>layout</i></h3>
                <code>public function layout()</code>
                <div class="mdetail-desc">
                    Performs a layout update.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="on"></a>
                <div class="mdetail alt">
                <h3>on</i></h3>
                <code>public function on(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>, <span class="optional" title="Optional">[<code>Object options</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Appends an event handler to this element (shorthand for addListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The method the event invokes</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope in which to execute the handler
function. The handler function's "this" context.</div></li><li><code>options</code> : Object<div class="sub-desc">(optional)</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#on" href="Ext.util.Observable.html#on">Observable</a>.</div>
                </div>
                            <a name="purgeListeners"></a>
                <div class="mdetail">
                <h3>purgeListeners</i></h3>
                <code>public function purgeListeners()</code>
                <div class="mdetail-desc">
                    Removes all listeners for this object
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li>None.</li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#purgeListeners" href="Ext.util.Observable.html#purgeListeners">Observable</a>.</div>
                </div>
                            <a name="remove"></a>
                <div class="mdetail alt">
                <h3>remove</i></h3>
                <code>public function remove(&nbsp;<code>String target</code>, <code>Number/String/Ext.ContentPanel panel</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Remove a ContentPanel (or subclass) to this layout.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>target</code> : String<div class="sub-desc">The target region key (north, south, east, west or center).</div></li><li><code>panel</code> : Number/String/Ext.ContentPanel<div class="sub-desc">The index, id or panel to remove</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.ContentPanel</code><div class="sub-desc">The removed panel</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="removeListener"></a>
                <div class="mdetail">
                <h3>removeListener</i></h3>
                <code>public function removeListener(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#removeListener" href="Ext.util.Observable.html#removeListener">Observable</a>.</div>
                </div>
                            <a name="restoreState"></a>
                <div class="mdetail alt">
                <h3>restoreState</i></h3>
                <code>public function restoreState(&nbsp;<span class="optional" title="Optional">[<code>Ext.state.Provider provider</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Restores this layout's state using Ext.state.Manager or the state provided by the passed provider.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>provider</code> : Ext.state.Provider<div class="sub-desc">(optional) An alternate state provider</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="showPanel"></a>
                <div class="mdetail">
                <h3>showPanel</i></h3>
                <code>public function showPanel(&nbsp;<code>String/ContentPanel panelId</code>&nbsp;)</code>
                <div class="mdetail-desc">
                    Searches all regions for a panel with the specified id and activates (shows) it.
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>panelId</code> : String/ContentPanel<div class="sub-desc">The panels id or the panel itself</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>Ext.ContentPanel</code><div class="sub-desc">The shown panel or null</div></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by BorderLayout.</div>
                </div>
                            <a name="un"></a>
                <div class="mdetail alt">
                <h3>un</i></h3>
                <code>public function un(&nbsp;<code>String eventName</code>, <code>Function handler</code>, <span class="optional" title="Optional">[<code>Object scope</code>]</span>&nbsp;)</code>
                <div class="mdetail-desc">
                    Removes a listener (shorthand for removeListener)
                <div class="mdetail-params">
                    <strong>Parameters:</strong>
                    <ul><li><code>eventName</code> : String<div class="sub-desc">The type of event to listen for</div></li><li><code>handler</code> : Function<div class="sub-desc">The handler to remove</div></li><li><code>scope</code> : Object<div class="sub-desc">(optional) The scope (this object) for the handler</div></li>                    </ul>
                    <strong>Returns:</strong>
                    <ul>
                        <li><code>void</code></li>
                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This method is defined by <a ext:cls="Ext.util.Observable" ext:member="#un" href="Ext.util.Observable.html#un">Observable</a>.</div>
                </div>
                        </div>
        
                    <h2 class="mdetail-head">Event Details</h2>
            <div class="detail-wrap">
                            <a name="event-layout"></a>
                <div class="mdetail">
                <h3>layout</i></h3>
                <code>public event layout</code>
                <div class="mdetail-desc">
                Fires when a layout is performed.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>this</code> : Ext.LayoutManager<div class="sub-desc"></div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.LayoutManager" ext:member="#event-layout" href="Ext.LayoutManager.html#event-layout">LayoutManager</a>.</div>
                </div>
                            <a name="event-regioncollapsed"></a>
                <div class="mdetail alt">
                <h3>regioncollapsed</i></h3>
                <code>public event regioncollapsed</code>
                <div class="mdetail-desc">
                Fires when a region is collapsed.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>region</code> : Ext.LayoutRegion<div class="sub-desc">The collapsed region</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.LayoutManager" ext:member="#event-regioncollapsed" href="Ext.LayoutManager.html#event-regioncollapsed">LayoutManager</a>.</div>
                </div>
                            <a name="event-regionexpanded"></a>
                <div class="mdetail">
                <h3>regionexpanded</i></h3>
                <code>public event regionexpanded</code>
                <div class="mdetail-desc">
                Fires when a region is expanded.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>region</code> : Ext.LayoutRegion<div class="sub-desc">The expanded region</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.LayoutManager" ext:member="#event-regionexpanded" href="Ext.LayoutManager.html#event-regionexpanded">LayoutManager</a>.</div>
                </div>
                            <a name="event-regionresized"></a>
                <div class="mdetail alt">
                <h3>regionresized</i></h3>
                <code>public event regionresized</code>
                <div class="mdetail-desc">
                Fires when the user resizes a region.
                <div class="mdetail-params">
                    <strong style="font-weight:normal;">Subscribers will be called with the following parameters:</strong>
                    <ul><li><code>region</code> : Ext.LayoutRegion<div class="sub-desc">The resized region</div></li><li><code>newSize</code> : Number<div class="sub-desc">The new size (width for east/west, height for north/south)</div></li>                    </ul>
                </div>
                </div>
                <div class="mdetail-def">This event is defined by <a ext:cls="Ext.LayoutManager" ext:member="#event-regionresized" href="Ext.LayoutManager.html#event-regionresized">LayoutManager</a>.</div>
                </div>
                        </div>
                
        </div>
    <hr>
    <div style="font-size:10px;text-align:center;color:gray;">Ext - Copyright &copy; 2006-2007 Ext JS, LLC<br />All rights reserved.</div>

    </body>
</html>